<!-- 仓库 -->
<template>
  <div>
    <el-card>
      <el-row>
        <el-col>
          仓库名称：
          <el-select
            v-model="searchModel.warehouseName"
            filterable
            placeholder="请选择"
            style="width: 300px; margin: 10px"
            clearable
          >
            <el-option
              v-for="item in allwareHouseName"
              :key="item.id"
              :label="item.warehouseName"
              :value="item.warehouseName"
            >
            </el-option>
          </el-select>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getWarehouseList()"
            >查询</el-button
          >
          <el-button type="primary" @click="warehouseUi(null)"
            >添加仓库</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-row>
        <el-col>
          <el-table
            :data="warehouseList"
            border
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column prop="warehouseName" label="仓库名称" width="180">
            </el-table-column>
            <el-table-column
              prop="inventoryNumber"
              label="库存数量"
              width="180"
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.inventoryNumber }}台
                  <el-button
                    type="text"
                    size="mini"
                    @click="selectinventorys({ warehouseId: scope.row.id })"
                    >详情</el-button
                  >
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="text" @click="warehouseUi(scope.row.id)"
                  >编辑</el-button
                >
                <el-button type="text" @click="deleteWarehouseById(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 编辑仓库对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="380px"
      :before-close="handleClose"
      @close="cleaForm"
    >
      <el-form :model="warehouseForm" :rules="rules" ref="WarehouseFormRef">
        <el-form-item
          label="仓库名称"
          :label-width="formLabelWidth"
          prop="warehouseName"
        >
          <el-input
            v-model="warehouseForm.warehouseName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveWarehouse()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog title="仓库详情" :visible.sync="dialogTableVisibleInventory">
      <el-table
        :data="inventorys"
        v-loading="inventoryLoading"
        max-height="250"
      >
        <el-table-column
          property="serialNumber"
          label="序列号"
          width="360"
        ></el-table-column>
        <el-table-column
          property="goodsName"
          label="商品"
          width="200"
        ></el-table-column>

        <el-table-column
          property="createTime"
          label="创建时间"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import warehouseApi from "@/api/inventory/warehouse";
import { getToken } from "@/utils/auth";
import inventoryApi from "@/api/inventory/inventory";

export default {
  data() {
    return {
      loading: false,
      title: "",
      warehouseForm: {},
      formLabelWidth: "90px",

      dialogFormVisible: false,
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,

      allwareHouseName: [],

      // 仓库列表
      warehouseList: [],
      // 详情对话框
      dialogTableVisibleInventory: false,
      inventoryLoading: false,

      inventorys: [],

      rules: {
        warehouseName: [
          { required: true, message: "请输入仓库名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getWarehouseList();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getWarehouseList();
    },
    // 确认关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 清理表单数据
    cleaForm() {
      // 清理数据
      this.warehouseForm = {};
      if (
        this.$refs.WarehouseFormRef != null &&
        this.$refs.WarehouseFormRef != undefined
      ) {
        this.$refs.WarehouseFormRef.clearValidate();
      }
    },

    warehouseUi(id) {
      if (id == null || id == undefined) {
        this.title = "新增仓库";
      } else {
        this.title = "编辑仓库";

        warehouseApi.getWarehouseById(id).then((response) => {
          this.warehouseForm = response.data;
        });
      }
      this.dialogFormVisible = true;
    },

    getWarehouseList() {
      this.loading = true;
      warehouseApi.getWarehouseList(this.searchModel).then((response) => {
        this.warehouseList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },

    saveWarehouse() {
      this.$refs.WarehouseFormRef.validate((valid) => {
        if (valid) {
          // 提交数据给后台
          warehouseApi.saveWarehouse(this.warehouseForm).then((response) => {
            if (response.code === 20000) {
              this.$message({
                showClose: true,
                message: response.message,
                type: "success",
              });
              // 关闭对话框
              this.dialogFormVisible = false;
              // 刷新表单
              this.getWarehouseList();
            } else {
              this.$message({
                showClose: true,
                message: response.message,
                type: "error",
              });
              this.getWarehouseList();
            }
          });
        } else {
          // 验证不通过
          this.$message({
            showClose: true,
            message: "表单验证不通过",
            type: "error",
          });
          return false;
        }
      });
    },

    // 删除仓库
    deleteWarehouseById(warehouse) {
      this.$confirm(`您确删除该仓库吗?-${warehouse.warehouseName}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          warehouseApi
            .deleteWarehouseById(warehouse.id, getToken())
            .then((response) => {
              this.$message({
                type: "success",
                message: response.message,
              });
              this.getWarehouseList();
            });
        })

        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getAllwareHouseName() {
      warehouseApi.selseAllName().then((response) => {
        this.allwareHouseName = response.data;
      });
    },

    // 显示序列号详情列表
    selectinventorys(model) {
      this.inventoryLoading = true;
      this.dialogTableVisibleInventory = true;
      inventoryApi.getWarehouseInventory(model).then((response) => {
        this.inventorys = response.data;
        this.inventoryLoading = false;
      });
    },
  },

  created() {
    this.getWarehouseList();
    this.getAllwareHouseName();
  },
};
</script>

<style scoped></style>
